---
title: Installation
---


::doc-component-demo
---
title: Install and run the project
---

Tairo needs you to install the dependencies defined in all `package.json` files inside the different packages. 

You can check which directories are considered as package in the `pnpm-workspace.yaml` configuration file.

:doc-heading{label="Install Node.js dependencies"}

To do so, use the following command:

```bash
pnpm install
```

This will create a `node_module` folder in each package containing the dependencies.

You may need to remove them if you update the dependencies, you can use `find` unix command to do so:

```bash
find . -maxdepth 4 -name node_modules -type d -prune -exec rm -rf {} \;
```

:doc-heading{label="Start the development server"}

Now you can start the project using the following command:

```bash
pnpm dev
```

:::doc-message{type="muted" icon="ph:info"}
You should see the Tairo Welcome page, see how to [build your first page](/documentation/setup/first-page) guide to replace it.
:::

Running this command will start the development server from the `app` folder and open the frontend in your browser. You can now start editing the files and see the changes in real time.

Once you are done, you can stop the development server by pressing `Ctrl + C` (or `⌘ + C` on macOS) in your terminal. To deploy the project for production, use the `pnpm build` command. This will build the project in the `app/dist` folder.

:doc-heading{label="App structure"}

The base structure of the Tairo starter is an empty Nuxt app that only extends from the Tairo layer.

Here is the structure of the `app` folder: 

```bash
├── app # This is the entry point of your app (main app layer)
│   ├── layouts
│   │   └── default.vue # use Tairo sidebar layout as default
│   ├── README.md
│   ├── app.config.ts # Your app configuration
│   ├── nuxt.config.ts # Your nuxt configuration (register layers)
│   ├── package.json # Your custom dependencies
│   ├── tailwind.config.ts # Your tailwind configuration
│   └── tsconfig.json
├── layers
│   └── tairo # Contains Tairo shared ready-to-use components
│   └── tairo-sidebar-layour # Contains Tairo sidebar layout
```

:::doc-message{type="muted" icon="lucide:info"}
You can find more information about the app structure in the [Nuxt and Layer](/documentation/setup/nuxt-and-layers) guide.
:::

---

Useful resources:

- [Read deployment guide on nuxt.com](https://nuxt.com/docs/getting-started/deployment)
::



::doc-component-demo
---
title: Run the full demo
---
The source of the main demo is separated from the Tairo source, 
allowing you to simply remove it if not needed, in order to start from a clean project.

:doc-heading{label="Demo project structure"}

The Tairo demo is split into differents layers: 

```bash
├── demo # This is the entry point of the demo (demo app layer)
├── layers
│   ├── documentation # Contains nuxt/content related features
│   ├── landing # Contains marketing related features
│   ├── tairo # Contains Tairo shared ready-to-use components
│   └── tairo-sidebar-layour # Contains Tairo sidebar layout
│   └── tairo-collapse-layour # Contains Tairo collapse layout
```

:doc-heading{label="Start the demo development server"}

To start the project from the demo instead of the app folder, run this command:

```bash
pnpm demo:dev
```

:::doc-message{type="muted" icon="ph:info"}
Check the `scripts` section of the `package.json` file to know what you can run with `pnpm`.
:::


:doc-heading{label="Optional demo features"}

By default the `documentation` layer is not enabled, it's a heavy layer due to usage of the [nuxt-component-meta](https://github.com/nuxtlabs/nuxt-component-meta) module that generates up to date components documentation directly from the source code.

You can copy the `demo/.env.example` to `demo/.env` to enable it, as other additionnal features described in the file. *Note that this architecture can be used to create kill switch feature flag*
::




::doc-nav
---
prev: /documentation/setup/nuxt-and-layers
next: /documentation/setup/first-page
---
::